<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <button id="btn01">点我发送请求 - $.ajax()</button>
    <script>
        const btn01 = document.querySelector('#btn01')

        const myAxios = options => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    ...options,
                    success: res => {
                        resolve({ data: res })
                    },
                    error: err => {
                        reject(err)
                    },
                })
            })
        }

        const getHot = () => {
            // 1. jq写法
            // $.ajax({
            //   method:'get',
            //   url:'http://pcapi-xiaotuxian-front-devtest.itheima.net/home/hot',
            //   success: (res)=>{
            //     console.log(res);
            //   }
            // })

            // 2. axios 写法
            // return axios({
            //   method: 'get',
            //   url: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/home/hot',
            // })

            // 3. 自己封装实现 axios
            return myAxios({
                method: 'get',
                url: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/home/hot',
            })
        }

        btn01.addEventListener('click', async () => {
            const { data } = await getHot()
            console.log(data)
        })
    </script>
</body>

</html>
